// src/components/popups/sponsorOverview/sponsorCountByProgram/SponsorCountBarChart.tsx

import React from 'react';
import ReactECharts from 'echarts-for-react';

interface BarChartProps {
  data: { program: string; sponsorCount: number }[];
}

const SponsorCountBarChart: React.FC<BarChartProps> = ({ data }) => {
  const isSmallScreen = typeof window !== 'undefined' && window.innerWidth < 640;
  const chartMinWidth = Math.max(isSmallScreen ? 350 : 600, data.length * (isSmallScreen ? 60 : 80));
  const isDark = typeof window !== 'undefined' && document.documentElement.classList.contains('dark');
  const mainColor = isDark ? '#06b6d4' : '#2563eb';
  const axisColor = isDark ? '#94a3b8' : '#64748b';
  const labelColor = isDark ? '#e0f2fe' : '#1e293b';
  const gridLineColor = isDark ? '#334155' : '#e5e7eb';
  const tooltipBg = isDark ? '#1e293b' : '#fff';
  const tooltipText = isDark ? '#e0f2fe' : '#222';
  const tooltipBorder = isDark ? '#06b6d4' : '#2563eb';
  const option = {
    title: {
      text: 'Sponsor Count by Program',
      left: 'center',
      textStyle: { fontWeight: 'bold', fontSize: isSmallScreen ? 14 : 20, color: labelColor }
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: tooltipBg,
      borderColor: tooltipBorder,
      borderWidth: 1,
      textStyle: { color: tooltipText, fontWeight: 'bold' },
      extraCssText: 'box-shadow:0 2px 12px rgba(0,0,0,0.1); border-radius:8px;'
    },
    grid: { left: isSmallScreen ? 60 : 120, right: 20, bottom: isSmallScreen ? 40 : 60, top: isSmallScreen ? 40 : 70 },
    xAxis: {
      type: 'category',
      data: data.map(d => d.program),
      axisLabel: { rotate: 30, fontWeight: 'bold', color: labelColor, fontSize: isSmallScreen ? 10 : 14 },
      axisLine: { lineStyle: { color: gridLineColor, width: 2 } },
      axisTick: { show: false }
    },
    yAxis: [
      {
        type: 'value',
        name: 'Number of Sponsors',
        position: 'left',
        axisLabel: { show: true, color: axisColor, fontWeight: 'bold', fontSize: isSmallScreen ? 10 : 13 },
        axisLine: { show: false },
        splitLine: { show: true, lineStyle: { color: gridLineColor, type: 'dashed' } },
        nameTextStyle: { fontWeight: 'bold', color: axisColor, fontSize: isSmallScreen ? 10 : 14 }
      }
    ],
    series: [
      {
        data: data.map(d => d.sponsorCount),
        type: 'bar',
        itemStyle: {
          color: mainColor,
          borderRadius: [8, 8, 0, 0],
          shadowColor: mainColor + '33',
          shadowBlur: 8
        },
        barWidth: isSmallScreen ? '30%' : '50%',
        yAxisIndex: 0,
        label: {
          show: true,
          position: 'top',
          color: '#fff',
          fontWeight: 'bold',
          fontSize: isSmallScreen ? 10 : 14,
          backgroundColor: mainColor,
          borderRadius: 8,
          padding: isSmallScreen ? [2, 4] : [4, 8],
          shadowColor: mainColor + '55',
          shadowBlur: 6,
        },
        emphasis: {
          itemStyle: {
            color: isDark ? '#0891b2' : '#1d4ed8',
            shadowColor: (isDark ? '#0891b2' : '#1d4ed8') + 'aa',
            shadowBlur: 12
          },
          label: {
            backgroundColor: isDark ? '#0891b2' : '#1d4ed8',
            color: '#fff',
          }
        }
      }
    ]
  };

  if (!data || data.length === 0) {
    return (
      <div className="w-full flex items-center justify-center py-12 text-gray-400 italic text-base">No sponsor records found.</div>
    );
  }

  return (
    <div className="w-full overflow-x-auto">
      <div style={{ minWidth: chartMinWidth }}>
        <ReactECharts option={option} style={{ height: isSmallScreen ? 240 : 320, width: '100%' }} />
      </div>
    </div>
  );
};

export default SponsorCountBarChart; 